<template>
  <div class="articles">
    <!-- 大盒子 -->
    <div class="articles-box">
      <!-- 顶部 标题 title -->
      <div class="articles-title">以下是<span>Java</span>相关的文章</div>
      <!-- 内容 -->
      <!-- 内容 -->
      <div
        class="articleBox"
        v-for="item in artList"
        :key="item.index"
        @click="goArtDetails(item.id)"
      >
        <!-- 图片 -->
        <div class="picture">
          <img :src="item.cover" alt="暂无图片" />
          <span class="picture-date">{{
            getLocalTime(parseInt(item.createDate)).substr(0, 9)
          }}</span>
        </div>
        <!-- 文本 内容 -->
        <div class="txt">
          <!-- 文本标题 -->
          <h2>{{ item.articleTitle }}</h2>
          <!-- 内容 -->
          <div class="introduce">
            {{ item.summary }}
          </div>
          <!-- 底部 信息 -->
          <div class="info">
            <span>
              {{ getLocalTime(parseInt(item.createDate)) }}/
              {{ item.viewCounts }}浏览 / {{ item.likeCount }}点赞 /
              {{ item.commentCounts }}评论 / {{ item.wordNumber }}字</span
            >
            <span>{{ item.tags[0] }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  // 导入 接口文档
  import { postNewArticle } from '../../api/articlei.js';
  //  引入 加载组件
  import Loading from '@/components/loading/loading01.vue';
  export default {
    name: 'Articles',
    data() {
      return {
        page: 0, //从第几条开始获取数据
        count: 5, // 数量
        url: '/es/newestArticle', //接口地址 默认为最新文章的地址
        artCount: 0, //储存数据的数量
        artList: [], // 文章数据
      };
    },
    components: {
      Loading,
    },
    methods: {
      // 获取文章 最新的文章
      async getArticlei() {
        const { data: res } = await postNewArticle(this.page, this.count);
        if (res.data.length !== 0) {
          this.artCount = res.data.length;
          this.artList = res.data;
          console.log(res.data);
        }

        // let time = this.getLocalTime(res.data[0].createDate);

        // console.log(time);
      },
      // 转换时间戳函数
      getLocalTime(nS) {
        return new Date(parseInt(nS))
          .toLocaleString()
          .replace(/:\d{1,2}$/, ' ');
      },
    },
    created() {
      this.getArticlei();
    },
  };
</script>

<style lang="less" scoped>
  @import url('../../state/css/articlei/articles.less');
</style>
